<!DOCTYPE html>
<!-- 使用json描述5个商品的信息，每个商品包含（编号，名称，产地，价格，描述），最后使用DIV将其显示出来 -->
<!--使用json描述3个学生的信息，每个学生包含（编号，姓名，爱好（数组），好朋友（对象的数组）），最后使用DIV将其显示出来-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json</title>
    <script src="../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function (){
            var commodity = [{
                "id":1,
                "name":"电脑",
                "countryOfOrigin":"深圳",
                "price":5000,
                "explain":"这个电脑cpu是XXX，显卡是XXX，内存条是XXX"
            },{
                "id":2,
                "name":"键盘",
                "countryOfOrigin":"深圳",
                "price":300,
                "explain":"机械键盘 红轴 ……"
            },{
                "id":3,
                "name":"电脑",
                "countryOfOrigin":"深圳",
                "price":5000,
                "explain":"这个电脑cpu是XXX，显卡是XXX，内存条是XXX"
            },{
                "id":4,
                "name":"电脑",
                "countryOfOrigin":"深圳",
                "price":5000,
                "explain":"这个电脑cpu是XXX，显卡是XXX，内存条是XXX"
            },{
                "id":5,
                "name":"电脑",
                "countryOfOrigin":"深圳",
                "price":5000,
                "explain":"这个电脑cpu是XXX，显卡是XXX，内存条是XXX"
            }];

            var student = [{
                "id":1,
                "name":"张三",
                "hobby":["吃饭","睡觉","看书"],
                "friend":[{
                    "name":"李四",
                    "age":18
                },{
                    "name":"王五",
                    "age":19
                }]
            },{
                "id":2,
                "name":"李四",
                "hobby":["吃饭","睡觉","看书"],
                "friend":[{
                    "name":"张三",
                    "age":18
                },{
                    "name":"王五",
                    "age":19
                }]
            },{
                "id":3,
                "name":"王五",
                "hobby":["吃饭","睡觉","看书"],
                "friend":[{
                    "name":"李四",
                    "age":18
                },{
                    "name":"张三",
                    "age":19
                }]
            }];

            for (var i = 0; i < commodity.length; i++) {
                document.getElementById("show1").innerHTML += "编号:"+commodity[i].id+
                    "，名称:"+commodity[i].name+
                    "，产地:"+commodity[i].countryOfOrigin+
                    "，价格:" + commodity[i].price+
                    "，描述:"+commodity[i].explain+"<br/>"
            }
            for (var i = 0; i < student.length; i++) {
                document.getElementById("show2").innerHTML += "编号:"+student[i].id+"，姓名:"+student[i].hobby+"，爱好:";
                for (var j = 0 ; j < student[i].hobby.length ; j++){
                    document.getElementById("show2").innerHTML += student[i].hobby[i]+"，";
                }
                document.getElementById("show2").innerHTML +="好朋友：【";
                for (var j = 0 ; j < student[i].friend.length ; j++){
                    document.getElementById("show2").innerHTML += "姓名："+student[i].friend[j].name + "，年龄：" + student[i].friend[j].age+"；";
                }
                document.getElementById("show2").innerHTML +="】<br/>";
            }
        });
    </script>
</head>
<body>
    <div id="show1"></div>
    <div id="show2"></div>

</body>
</html>